<div class="modal-header">
    <h4 class="modal-title">
        <span >{{"ManualSynchorization" | localize}}</span>
    </h4>

    <span class="pull-right" style="display:inline-block">
        <button class="btn btn-xs2 btn-primary blue mr-2" (click)="confirm()" >
            <i class="fa fa-plus"></i> {{"Confirm" | localize}}
        </button>
        <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
            <i aria-hidden="true" class="bi bi-x"></i>
        </button>
    </span>
</div>
<div class="modal-body" >
    <form class="form" autocomplete="new-password">
        <div>
            <div class="row align-items-center mb-4" *ngIf="keyList.length > 0">
                <div class="col-xl-6">
                    <div class="form-group">
                        <select class="form-control" name="alias" (change)="getListData()" [(ngModel)]="selectedKey">
                            <option value="{{alias.value}}" *ngFor="let alias of keyList">{{alias.name}}</option>
                        </select>
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="form-group m-form__group align-items-center">
                        <div class="input-group">
                            <input [(ngModel)]="filterText" name="filterText" autoFocus
                                   class="form-control m-input" [placeholder]="l('SearchWithThreeDot')"
                                   type="text">
                            <div class="input-group-append">
                                <button (click)="getListData()" class="btn btn-default"
                                        type="submit">
                                    <i class="icon-magnifier"
                                       [attr.aria-label]="l('Search')"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row align-items-center mb-4" *ngIf="keyList.length === 0">
                <div class="col-xl-12">
                    <div class="form-group m-form__group align-items-center">
                        <div class="input-group">
                            <input [(ngModel)]="filterText" name="filterText" autoFocus
                                   class="form-control m-input" [placeholder]="l('SearchWithThreeDot')"
                                   type="text">
                            <div class="input-group-append">
                                <button (click)="getListData()" class="btn btn-default"
                                        type="submit">
                                    <i class="icon-magnifier"
                                       [attr.aria-label]="l('Search')"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <div class="row align-items-center">
        <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
            <p-table #dataTable sortMode="multiple" 
                [value]="primengTableHelper.records"
                rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                [scrollable]="true" ScrollWidth="100%"
                [responsive]="primengTableHelper.isResponsive"
                [resizableColumns]="primengTableHelper.resizableColumns"
                [(selection)]="selectedDatas"
                dataKey="id" 
                selectionMode="multiple">
                <ng-template pTemplate="header">
                    <tr>
                        <th style="width:80px;max-width: 80px;">
                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                        </th>
                        <th style="width: 180px;max-width: 180px;">
                            {{'Id' | localize}}
                        </th>
                        <th style="width: 300px;">
                            {{'Title' | localize}}
                        </th>
                        <th style="width: 180px;max-width: 180px;">
                            {{'CreationTime' | localize}}
                        </th>
                        <th style="width: 180px;max-width: 180px;">
                            {{'MotifyTime' | localize}}
                        </th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-record="$implicit">
                    <tr>
                        <td style="width: 80px;max-width: 80px;">
                            <p-tableCheckbox [value]="record" (click)="$event.stopPropagation()"></p-tableCheckbox>
                        </td>
                        <td style="width: 180px;max-width: 180px;">
                            {{record.id}}
                        </td>
                        <td style="width: 300px;">
                            <span >{{record.title}}</span>
                        </td>
                        <td style="width: 180px;max-width: 180px;">
                            {{record.creationTime | luxonFormat:'yyyy-LL-dd HH:mm:ss' }}
                        </td>
                        <td style="width: 180px;max-width: 180px;">
                            {{record.lastModificationTime | luxonFormat:'yyyy-LL-dd HH:mm:ss' }}
                        </td>
                    </tr>
                </ng-template>
            </p-table>
            <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                {{'NoData' | localize}}
            </div>
            <div class="primeng-paging-container">
                <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                    (onPageChange)="getListData($event)"
                    [totalRecords]="primengTableHelper.totalRecordsCount"
                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"
                    [showCurrentPageReport]="true"
                    [currentPageReportTemplate]="'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount">
                </p-paginator>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <div class="col-xs-12 text-left" *ngIf="synchorizationInfo.isBeginRequest">
        <label style="font-weight:400">{{"CurrentSynchorizationInfo" | localize}}:{{synchorizationInfo.currentIndex}} / {{synchorizationInfo.allNums}},id:{{synchorizationInfo.currentId}}</label>
    </div>
</div>